import { lazyReportCache,report } from "../report";
import config from "../config";

// 通过connection可以获取到: 网络环境, 往返时间, 等信息
const connection = navigator.connection;
// pv: 单日访问量
// cv: 单日访问人数
export function pv() { 
  lazyReportCache('behavior', {
    subType: 'pv',
    // referrer: 它记录了用户是从哪个网页跳转到当前页面的URL地址
    // 例如: 用户从GitHub点击链接进入你的项目 → referrer 是GitHub的页面URL
    // 例如: 用户直接输入网址或从书签访问 → referrer 通常是空字符串
    referrer: document.referrer,  
    effectiveType: connection ? connection.effectiveType : '', //网络环境
    rtt: connection ? connection.rtt : '', //往返时间
  })
}

//页面停留时间
export function pageStayTime() {
  const startTime = Date.now();

  // 具体触发场景：
  // 关闭浏览器标签页 → 触发 beforeunload 事件
  // 关闭浏览器窗口 → 触发 beforeunload 事件
  // 刷新页面（F5 或 Ctrl+R） → 触发 beforeunload 事件
  // 在地址栏输入新网址并回车 → 触发 beforeunload 事件
  // 点击浏览器的前进/后退按钮 → 触发 beforeunload 事件
  // JavaScript调用 window.close() → 触发 beforeunload 事件
  // 表单提交后页面跳转 → 触发 beforeunload 事件
  window.addEventListener('beforeunload', () => {
    const stayTime = Date.now() - startTime;

    report('behavior', [{
      subType: 'pageStayTime',
      effectiveType: connection ? connection.effectiveType : '', //网络环境
      stayTime
    }],true)
  },true);
}

//首先记录一开始的时间
window.pageViewStartTime = Date.now();

export function onVueRouter() { 
  if (!config.vue || !config.vue.router) return;

  // 具体触发场景：
  // 用户点击 Vue Router 链接跳转 → 触发 beforeEach 钩子
  // 程序调用 this.$router.push() → 触发 beforeEach 钩子
  // 程序调用 this.$router.replace() → 触发 beforeEach 钩子
  // 程序调用 this.$router.go() → 触发 beforeEach 钩子
  // 用户点击浏览器的前进/后退按钮（在SPA中）→ 触发 beforeEach 钩子
  config.vue.router.beforeEach((to, from, next) => { 
    //如果是首次加载页面不需要统计
    if (!from.name) return next();
    
    const stayTime = Date.now() - window.pageViewStartTime;
    window.pageViewStartTime = Date.now();
    // console.log(`页面停留时间 ${from.name}: ${stayTime}ms`);
    // console.log(to);
    // console.log(from);


    lazyReportCache('behavior', {
      subType: 'vueRouterChange',
      params: to.params,
      query: to.query,
      name: to.name || to.path,
      from: from.fullPath,
      to: to.fullPath,
      stayTime
    })

    next();
  });
}

export function pageChange() { 
  let from = document.referrer;

  // 触发场景：
  // 用户点击浏览器后退按钮 → 触发 popstate 事件
  // 用户点击浏览器前进按钮 → 触发 popstate 事件
  // JavaScript调用 history.back() → 触发 popstate 事件
  // JavaScript调用 history.forward() → 触发 popstate
  window.addEventListener('popstate', () => { 
    const to = window.location.href;
    console.log(to, from);
    lazyReportCache('behavior', {
      subType: 'pageChange',
      from,
      to
    });

    from = to;
  },true)

  let oldURL = document.referrer;
  window.addEventListener('hashchange', event => { 
    const newURL = event.newURL;

    lazyReportCache('behavior', {
      subType: 'pageChange',
      from: oldURL,
      to: newURL
    });

    oldURL = newURL;
  },true)

}
